<template>
  <div id="charts-demo"  ref="chart" class="echart"></div>
</template>

<script>
export default {
  props: {
    lineData: Array,
  },
  data() {
    return {
      fontSize:16,
      padding:false,
    };
  },
  mounted() {
    this.drawLine(this.lineData[0]);
    // //console.log(this.lineData)
  },
  computed: {
    // getLegenddata(){
    //   return this.lineData[0].legend_data
    // },
    // getXAxisdata(){
    //   return this.lineData[0].xAxis_data
    // },
  },
  methods: {
    // data(){
    // },
    ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=16;
              this.padding=true;
          }
 },
    drawLine(n) {
      this.ScreenWidth();
      var that = this;
      // 基于准备好的dom，初始化echarts实例
      
        const chart = this.$refs.chart;
  
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      // 绘制图表
      myChart.setOption({
        // title: {
        //   text: "堆叠区域图",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          data: n.legend_data,
          icon: "roundRect",
          right: "0",
          top: "0",
          textStyle: {
            //图例文字的样式
            color: "white",
            fontSize: that.fontSize,
          },
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {},
        //   },
        // },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0",
          top: "20%",
          // height:"100%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: n.xAxis_data,
            // axisLabel: {
            //   textStyle: {
            //     color: "#fff",
            //     fontSize: 16,
            //   },
            // },
            axisLine: {
              lineStyle: {
                color: "rgb(52, 119, 188)",
                width: 2, //这里是为了突出显示加上的
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 1, //横轴信息全部显示
              textStyle: {
                color: "#fff",
                fontSize: that.fontSize,
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgb(26, 158, 209)",
                fontSize: that.fontSize,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(52, 119, 188)",
                width: 2, //这里是为了突出显示加上的
              },
            },
            name: "人员进出统计",
            nameTextStyle: {
              color: "white",
              fontSize: that.fontSize,
              padding: that.padding?[0, 0, 5, 55]:[0,0,0,0],
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(26, 158, 209)",
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside", //详细配置可见echarts官网
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 50, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
        series: [
          {
            name: n.series.length && n.series[0].name,
            type: "line",
            stack: "总量",
            // areaStyle: {},
            // emphasis: {
            //   focus: "series",
            // },
            itemStyle: {
              normal: {
                color: "rgb(17, 193, 239)", //折点颜色
                lineStyle: {
                  color: "rgb(17, 193, 239)", //折线颜色
                },
              },
            },
            symbol: "circle", //设定为实心点
            symbolSize: 8, //设定实心点的大小
            data: n.series[0].data,
          },
          {
            name: n.series.length && n.series[1].name,
            type: "line",
            stack: "总量",
            // areaStyle: {},
            // emphasis: {
            //   focus: "series",
            // },
            itemStyle: {
              normal: {
                color: "rgb(210, 229, 120)", //折点颜色
                lineStyle: {
                  color: "rgb(210, 229, 120)", //折线颜色
                },
              },
            },
            symbol: "circle", //设定为实心点
            symbolSize: 8, //设定实心点的大小
            data: n.series[1].data,
          },
          {
            name: n.series.length && n.series[2].name,
            type: "line",
            stack: "总量",
            // areaStyle: {},
            // emphasis: {
            //   focus: "series",
            // },
            itemStyle: {
              normal: {
                color: "rgb(144, 114, 251)", //折点颜色
                lineStyle: {
                  color: "rgb(144, 114, 251)", //折线颜色
                },
              },
            },
            symbol: "circle", //设定为实心点
            symbolSize: 8, //设定实心点的大小
            data: n.series[2].data,
          },
        ],
      });
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
};
</script>
<style lang="less" scoped>
.echart {
  //   width: 200px;
 height: 7.24vw;
 min-height: 7.24vw;
 
}
</style>
